import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet-async';
import { motion } from 'framer-motion';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { Link } from 'react-router-dom';


// 模拟企业动态新闻数据
const companyNewsData = [
  {
    id: 1,
    title: "豆豆Pay宣布与日本大型零售商达成战略合作",
    date: "2025-08-15",
    category: "战略合作",
    summary: "豆豆Pay今日宣布与日本知名连锁零售商达成战略合作，将为其提供全方位的支付解决方案，覆盖线上线下全渠道支付场景。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20partnership%2C%20retail%20industry%2C%20payment%20solution&sign=6733013453fdbaa182f831bd764ff8e1"
  },
  {
    id: 2,
    title: "豆豆Pay发布2025年第一季度业绩报告",
    date: "2025-04-22",
    category: "业绩报告",
    summary: "豆豆Pay公布了2025年第一季度财务业绩，报告显示公司营收同比增长35%，海外业务拓展取得显著进展。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=financial%20report%2C%20business%20growth%2C%20performance%20analysis&sign=cdcdc92af84267469367fe69be1d1cf8"
  },
  {
    id: 3,
    title: "豆豆Pay推出全新跨境支付服务",
    date: "2025-03-10",
    category: "产品发布",
    summary: "豆豆Pay今日正式推出升级版跨境支付服务，新增多种货币兑换选项，手续费降低15%，到账时间缩短至2小时。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=cross-border%20payment%20service%2C%20international%20finance%2C%20money%20transfer&sign=788cc0709ddb7ca86bf653aee9effcda"
  },
  {
    id: 4,
    title: "豆豆Pay荣获日本金融科技创新大奖",
    date: "2025-02-18",
    category: "公司荣誉",
    summary: "在东京举办的2025日本金融科技峰会上，豆豆Pay凭借创新的支付解决方案荣获\"年度最佳金融科技创新奖\"。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fintech%20award%2C%20company%20achievement%2C%20innovation%20award&sign=c2a5ca545d0f879c7a2205ec8c11c862"
  },
  {
    id: 5,
    title: "豆豆Pay东京新总部正式启用",
    date: "2025-01-05",
    category: "公司动态",
    summary: "豆豆Pay位于东京丸之内的新总部大楼今日正式启用，新办公空间采用开放式设计，可容纳500名员工，彰显公司对日本市场的长期承诺。",
    imageUrl: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=company%20headquarters%2C%20modern%20office%2C%20Tokyo%20Japan&sign=bcdb41c2c0a886da7a609ec4aa5fc1bd"
  }
];

export default function CompanyNews() {
  const { t, i18n } = useTranslation();
  
  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Header />
      <Helmet>
        <title>{t('header.companyNews')} - {t('seo.title')}</title>
        <meta name="description" content={t('news.companyNewsDesc')} />
        <meta property="og:title" content={`${t('header.companyNews')} - ${t('seo.title')}`} />
        <meta property="og:locale" content={i18n.language === 'ja' ? 'ja_JP' : 'zh_CN'} />
      </Helmet>
      

      <main className="flex-grow">
         {/* 页面标题区域 */}
        <section className="py-16 md:py-24 bg-gradient-to-r from-blue-50 to-indigo-900">
           <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">
                {t('header.companyNews')}
              </h1>
              <div className="w-20 h-1 bg-blue-400 mx-auto mb-8 rounded-full"></div>
              <p className="text-lg md:text-xl text-blue-100 leading-relaxed">
                {t('news.companyNewsDesc')}
              </p> 
            </motion.div>
          </div>
        </section>
        
        {/* 新闻列表 */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              {/* 新闻分类标签 */}
              <div className="mb-12">
                <div className="flex flex-wrap gap-3">
                  <button className="px-5 py-2 bg-gray-900 text-white rounded-full text-sm font-medium">
                    {t('news.allCategories')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('news.strategy')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('news.product')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('news.achievement')}
                  </button>
                  <button className="px-5 py-2 bg-gray-100 text-gray-800 hover:bg-gray-200 rounded-full text-sm font-medium transition-colors">
                    {t('news.event')}
                  </button>
                </div>
              </div>
              
              {/* 新闻列表 */}
              <div className="space-y-12">
                {companyNewsData.map((news) => (
                  <motion.article
                    key={news.id}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: (news.id - 1) * 0.05 }}
                    viewport={{ once: true }}
                    className="group"
                  >
                    <div className="md:flex gap-8">
                      <div className="md:w-2/5 mb-6 md:mb-0 overflow-hidden rounded-xl">
                        <img 
                          src={news.imageUrl} 
                          alt={news.title} 
                          className="w-full h-64 object-cover transition-transform duration-700 group-hover:scale-105"
                        />
                      </div>
                      <div className="md:flex-1">
                        <div className="flex flex-wrap items-center gap-4 mb-4">
                          <span className="text-sm font-medium text-gray-500">
                            {news.date}
                          </span>
                          <span className="px-3 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded-full">
                            {news.category}
                          </span>
                        </div>
                        <h3 className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-gray-700 transition-colors">
                          {news.title}
                        </h3>
                        <p className="text-gray-600 mb-6 leading-relaxed">
                          {news.summary}
                        </p>
                        <a 
                          href="#" 
                          className="inline-flex items-center text-gray-900 font-medium hover:text-gray-700 transition-colors"
                        >
                          {t('news.readMore')}
                          <i className="fa-solid fa-arrow-right ml-2 text-sm"></i>
                        </a>
                      </div>
                    </div>
                    {news.id !== companyNewsData.length && (
                      <div className="mt-10 border-t border-gray-100"></div>
                    )}
                  </motion.article>
                ))}
              </div>
              
               {/* 加载更多 */}
               <div className="mt-16 flex justify-center">
                 <button className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium rounded-md transition-colors shadow-sm hover:shadow">
                   <i className="fa-solid fa-refresh mr-2"></i>
                   {t('investor.loadMore')}
                 </button>
               </div>
            </div>
          </div>
        </section>
     </main>
      <Footer />

    </div>
  );
}